import { pageSource } from '@/services/api/api-datahub-source';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
import { useAccess } from '@umijs/max';
import { Tag } from 'antd';
import React, { useRef, useState } from 'react';

interface DatahubSourceDrawerProps {
  onRefurbish: () => void;
}

const DatahubSource: React.FC<DatahubSourceDrawerProps> = ({ onRefurbish }) => {
  const access = useAccess();

  const actionRef = useRef<ActionType>();

  const [search, setSearch] = useState<string>('');

  const columns: ProColumns<DatahubSourceData.SourcePage>[] = [
    {
      title: '账号',
      dataIndex: 'name',
      ellipsis: true,
      search: false,
      align: 'center',
    },
    {
      title: '渠道',
      dataIndex: 'channelName',
      ellipsis: true,
      search: false,
      align: 'center',
    },
    {
      title: '区域',
      dataIndex: 'areaName',
      key: 'author',
      align: 'center',
      search: false,
    },
    {
      title: '媒体',
      dataIndex: 'levelName',
      key: 'author',
      align: 'center',
      search: false,
    },
    {
      title: '操作',
      key: 'option',
      align: 'center',
      search: false,
      render: (text, record, _, action) => {
        return record?.organizations?.map((item) => <Tag>{item.name}</Tag>);
      },
    },
  ];

  return (
    <>
      <ProTable<DatahubSourceData.SourcePage>
        columns={columns}
        actionRef={actionRef}
        request={async (params = {}) => {
          const response = await pageSource({ ...params, name: search });

          return Promise.resolve({
            data: response.data.data,
            total: response.data.total,
            success: response.code === 0,
          });
        }}
        rowKey="id"
        dateFormatter="string"
        bordered
        search={false}
        toolbar={{
          search: {
            onSearch: (value: string) => {
              setSearch(value);
              actionRef.current?.reloadAndRest();
            },
          },
        }}
        ghost
        pagination={{
          showQuickJumper: true,
          showSizeChanger: true,
          defaultPageSize: 20,
        }}
        toolBarRender={(action) => [<></>]}
      />
    </>
  );
};
export default DatahubSource;
